<?php
	$linkprint = $this->getUrl('')."pos/index/index";
	$order = Mage::getSingleton('core/session')->getOrderPrint();

?>
<script type="text/javascript">
	jQuery(document).ready(function(){
		// jQuery.fn.colorbox({width:"50%", height:"50%",  href:"#old_order" ,onLoad: function() {
			// jQuery('#cboxClose').remove();
		// }});
		//jQuery.colorbox({iframe:true, innerWidth:425, innerHeight:344,href:"<?php echo $linkprint?>"});
	});
</script>

<?php ?>
<div class="content-header">
<table cellspacing="0">
    <tr>
        <td><h3><?php echo Mage::helper('pos')->__('Point Of Sale Manager') ?></h3></td>
    </tr>
</table>
</div>
<script type="text/javascript">	
	var pos_submit_url = 'http://demo.boostmyshop.com/demo1/index.php/PointOfSales/PointOfSales/CreateOrder/key/cbcf264e157b526c3d56c22ac5d4a6bb/';
	var paymentFormAjaxUrl = 'http://demo.boostmyshop.com/demo1/index.php/PointOfSales/PointOfSales/PaymentForm/key/ee53ee85a47383b1a7feac7bc8fde213/';
	var shippingMethodAjaxUrl = '<?php echo Mage::helper('adminhtml')->getUrl('*/pos_order/shippingmethod/');?>';
	var defaultShippingMethod = 'flatrate';
	var addProductFromBarcodeUrl = '<?php echo Mage::helper('adminhtml')->getUrl('*/pos_order/barcode', array('_query' => 'isAjax=true'));?>';
	var currency = '<?php echo Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol();?>';
	var closeModaleWindow = 'Close';
	var skinUrl = '<?php echo $this->getSkinUrl('images/gt_pos/')?>';
	var formKey = '<?php echo $this->getFormKey() ?>';
</script> 
<form id="form_one" action="<?php echo Mage::helper('adminhtml')->getUrl('pos/dev_dev/index/');?>" method="POST" name="form_one" enctype="multipart/form-data" target="blank">
	<input name="form_key" type="hidden" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>" />
	
	<input id="product_ids" type="hidden" value="" name="product_ids">
	<input id="customer_id" type="hidden" value="3" name="customer_id">
	<table width="100%" cellspacing="4" border="0">	
		<tbody>
			<tr>
				<td width="300">
					<div class="entry-edit">
						<div class="entry-edit-head">
							<h4 class="icon-head head-edit-form fieldset-legend">
								Preview
							</h4>
						</div>
						<fieldset id="col_right_product_info">
							
						</fieldset>
					</div>
					<div class="entry-edit">
						<div class="entry-edit-head">
							<h4 class="icon-head head-edit-form fieldset-legend">
								Gold Club Membership
							</h4>
						</div>
						<fieldset id="gold_member">
							
						</fieldset>
					</div>
					<div class="entry-edit">
						<div class="entry-edit-head">
							<h4 class="icon-head head-edit-form fieldset-legend">
								Sales on Hold
							</h4>
						</div>
						<fieldset id="hold_sale">
							
						</fieldset>
					</div>
					
				</td>
				<td>
					<div class="entry-edit">
						<div class="entry-edit-head">
							<h4 class="icon-head head-edit-form fieldset-legend">Bag</h4>
						</div>
						<fieldset>
							<div class="grid">
								<table width="100%" cellspacing="0" name="tbl_products" id="tbl_products" class="data">
									<colgroup>
										<col width="40"/>
										<col width="150"/>
										<col />
										<col width="40"/>
										<col width="100"/>
										<col width="90"/>
										<col width="100"/>
										<col width="90"/>
									</colgroup>
									<thead>
										<tr class="headings">
											<th class="a-center">S/N</th>
											<th class="a-center">Code</th>
											<th class="a-center">Description</th>
											<th class="a-center">Qty</th>
											<th class="a-center">Price </th>
											<th class="a-center">Members Price</th>												
											<th class="a-center">Inventory</th>
											<th class="a-center">Promo</th>
										</tr>
									</thead>
									<tbody>
										<tr class="even">
											<td class="empty-text a-center" colspan="8">No records found.</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="right">
								<button><span>Cancel</span></button>
								<button><span>Add</span></button>
							</div>
							<div class="clear"></div>
							<p></p>
							<div class="box-right grid">
								<table cellspacing="0" class="data">									
									<tbody>
										<tr class="even">
											<td>Discounted: </br>Members: </td>
											<td>Tax Code: Singapore</br>Tax Total: </td>
											<td>Total Before Discount: </br><strong>Final Total: </strong></td>
										</tr>										
									</tbody>									
								</table>
							</div>
							<div id="div_selected_products">

							</div>
						</fieldset>
					</div>
					<script type="text/javascript">
						jQuery(document).ready(function(){
							jQuery('.click_chose_product').click(function(){								
								var abc = 1;
								var stri = "";
								var stri2="";								
								
								var xyz = jQuery(this).next();
								var temp = '.pos_col_tier_'+xyz.attr('class');
								
								if(!jQuery(temp).attr('name')){
									xyz.find('input').each(function(i){
										if(jQuery(this).attr('id') == 'tierp_'+abc){										
											stri = "<span class='tierp'>"+jQuery(this).val()+"</span>";											
											stri2 = "Qty:<span class='qty_of_tier'>"+parseInt(jQuery(this).next().val())+"</span>";										
											var clasname = '.pos_' + jQuery(this).attr('class');
											jQuery(clasname).append("<p class='tier_price'>"+stri2+"="+stri+"</p>");										
											abc++;
											jQuery(clasname).attr('name','edited');
										}	
									});		
								}	
							});
						});
					</script>			

					<script>
						jQuery(document).ready(function() {
							jQuery("#action_tabs").tabs();
						});
					</script>
					

					<div id="action_tabs">				
						<ul class="tabs-horiz" >
							<li><a class="tab-item-link " title="Cash" href="#tab_payment_cash">Cash</a></li>
							<li><a class="tab-item-link " title="Nets" href="#tab_payment_nets">NETS</a></li>							
						</ul>		
						<table width="100%">
							<tbody>
								<tr>
									<td width="25%">
										<div id="tab_payment_cash" class="entry-edit">
											<fieldset>
												<span class="field-row">
													<center><h3>Cash</h3></center>
												</span>
												<span class="field-row">
													<center><img src="<?php echo $this->getSkinUrl('pos/payment_cash.png')?>"/></center>
												</span>
												<span class="field-row">
													Cash Received
													<br/>
													<div class="pos_given_amount_container">
														<span class="c_given_amount">$</span>
														<input type="text" id="given_amount" name="given_amount"/>
													</div>													
												</span>
												<span class="field-row">
													Grand Total:
												</span>
												<span class="field-row">
													Charge:
												</span>
												<p>&nbsp;</p>
												<div class="right">
													<button><span>Cancel</span></button>
													<button><span>Process</span></button>
												</div>
											</fieldset>
										</div>
										<div id="tab_payment_nets" class="entry-edit">
											<fieldset>
											</fieldset>
										</div>
									</td>
									<td>
										<?php echo $this->getChildHtml('pos_order_promotions')?>
									</td>
								</tr>
							</tbody>
						</table>
					</div>					
													
				</td>				
			</tr>
	</table>
</form>
<script type="text/javascript"> 

	//Init scanner
	// document.onkeypress = handleKey; 
	// enableCatchKeys(null, 'addProductFromBarcode();');

</script>
<script type="text/javascript">
    var editForm = new varienForm('form_one', '');
</script>
<div id="change_calculator" style="display:none">
	<div class="entry-edit">
		<div class="entry-edit-head">
			<h4 class="icon-head head-account">Change calculator</h4>
		</div>
		<div class="fieldset">
			<div class="hor-scroll">
				<table cellspacing="0" class="form-list">
				<tr>
					<td class="label"><h2>Order total</h2></td>
					<td><div id="cc_order_total" name="cc_order_total" style="font-size: 24px; text-align: right; width: 320px; margin-top: 10px; font-weight: bold;"></div></td>
				</tr>
				<tr>
					<td class="label"><h2>Given amount</h2></td>
					<td align="right">
						<div name="cc_given_amount" style="font-size: 24px; text-align: right; width: 320px; margin-top: 10px; font-weight: bold;">
							<span>$ </span><input id="cc_given_amount" onkeyup="calculateChange()" type="text" value="0.00" style="font-size: 24px; text-align: right; width: 170px; font-weight: bold;"/>
						</div>
					</td> 
				</tr>
				<tr>
					<td class="label">
						<h2>Change </h2>
					</td>
					<td><div id="cc_change" name="cc_change" style="font-size: 24px; text-align: right; width: 320px; margin-top: 10px; font-weight: bold; color:red;"></div></td>
				</tr>
				</table>
				<p>&nbsp;</p>
				<table cellspacing="0" width="100%">
					<tr>
						<td width="20%" align="center"><input type="button" value=" + 500 " onclick="addAmount(500)" style="font-size: 20px;"><br>&nbsp;</td>
						<td width="20%" align="center"><input type="button" value=" + 200 " onclick="addAmount(200)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 100 " onclick="addAmount(100)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 50 " onclick="addAmount(50)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 20 " onclick="addAmount(20)" style="font-size: 20px;"></td>
					</tr>
					<tr>
						<td width="20%" align="center"><input type="button" value=" + 10 " onclick="addAmount(10)" style="font-size: 20px;"><br>&nbsp;</td>
						<td width="20%" align="center"><input type="button" value=" + 5 " onclick="addAmount(5)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 2 " onclick="addAmount(2)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 1 " onclick="addAmount(1)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 0.5 " onclick="addAmount(0.5)" style="font-size: 20px;"></td>
					</tr>
					<tr>
						<td width="20%" align="center"><input type="button" value=" + 0.2 " onclick="addAmount(0.2)" style="font-size: 20px;"><br>&nbsp;</td>
						<td width="20%" align="center"><input type="button" value=" + 0.1 " onclick="addAmount(0.1)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 0.05 " onclick="addAmount(0.05)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 0.02 " onclick="addAmount(0.02)" style="font-size: 20px;"></td>
						<td width="20%" align="center"><input type="button" value=" + 0.01 " onclick="addAmount(0.01)" style="font-size: 20px;"></td>
					</tr>
					<tr>
						<td align="center" colspan="5">
							<input type="button" value=" Reset " onclick="resetAmount()" style="font-size: 20px;">
						</td>
				</table>
			</div>
		</div>
	</div>
</div>
